<template>
    <div class="cx_right">
        <elsFrom class="item" :key="index" ref="elsFromRef" :ddata="data.data" name="动态表单" :isView="false"
            @confirm="onDialogConfirm" @cancel="onDialogCancel"></elsFrom>
    </div>
</template>

<script setup name="addEdit">
import elsFrom from './elsFrom.vue'
import { reactive, ref } from 'vue';
const { proxy } = getCurrentInstance();
const emit = defineEmits(["refresh"]);
const elsFromRef = ref()
const data = reactive({
    "data": {},
    open: true,
    rules: {
        staffNo: [
            {
                required: true,
                message: "请输入工号",
                trigger: "change",
            },
            {
                min: 2,
                max: 256,
                message: "长度在 2 到 21 个字符",
                trigger: "blur",
            },
        ],
    },
});
const { } = toRefs(data);







const onDialogConfirm = e => {
    console.log(data.data, '表单数据')
}

const onDialogCancel = e => {
    console.log(e, 'onDialogCancel')
}

// 配置项目
const formMapConfig = () => {
    let formConfig = []
    TemList.forEach(ele => {
        if (ele.el == 'input') {
            formConfig.push({
                els: [
                    {
                        "label": ele.label,
                        "el": ele.el,
                        "prop": ele.prop,
                        "place": ele.label,
                    }
                ]
            })
        };

        if (ele.el == 'select') {
            formConfig.push({
                els: [
                    {
                        "label": ele.label,
                        "el": ele.el,
                        "prop": ele.prop,
                        "place": ele.label,
                        "props": {
                            "label": "label",
                            "value": "value"
                        },
                        "options": [
                            {
                                "label": "自由完成",
                                "value": 0
                            },
                            {
                                "label": "按日递进",
                                "value": 1
                            },
                            {
                                "label": "按日开放",
                                "value": 2
                            },

                        ]
                    }
                ]
            })
        };
    });
    data.form = formConfig
}

// 验证
const okFrom = () => {
    elsFromRef.value.onCheck()
}
// 暴露变量
defineExpose({
    okFrom,
});
</script>

<style lang="scss" scoped>
.cx_right_temList {
    min-height: 300px;
    max-height: 100vh;
    overflow-y: scroll;
}

.cx_right {
    background: #fff;
    padding: 20px;
    margin-left: 20px;
    margin-right: 20px;
    flex: 1;
    overflow-y: scroll;
}

.item {
    height: 100%;
    // padding: 10px;
    // margin: 10px;
    // display: inline-block;
    // background: #ccc;
}
</style>